﻿@model WeProjects.Models.HomeVModel
@{
    ViewBag.Title = "Home Page";
    //List<WeProjectsModel.Notice> notice = ViewBag.noticeLst;
}
@section featured {

}
<style type="text/css">
    #body {
        padding-top:0;
    }
        #body a {
            color: #333;
        }
    .row {
        margin-left:0px;
        margin-right:0px;
        margin-bottom:0px;
    }
    .col-sm-4 {
     }
        .col-sm-4 div {
            background-position: right bottom;
            background-repeat: no-repeat;
            padding: 10px 15px;
            height: 270px;
        }

    h4 {
        font-size: 22px;
        padding-bottom: 10px !important;
        font-weight:bolder;
    }
    .row h4 {
        padding-bottom:15px !important;
    }
    .row li {
        padding-top:3px;
        padding-bottom:3px;
    }

    .xw {
        padding-left: 0;
        padding-right: 0;
        padding-top: 16px !important;
    }
    .xw h4 {
        position:relative;
        padding-bottom:0;
        width: 100%;
        text-align:center;
        border-bottom: 1px solid #d4d4d4;
        color: #FFF;
        font-size: 18px;
        height: 32px;
        vertical-align: middle;
        margin-bottom:10px;
    }
        .xw h4 a {
            position: relative;
            padding-left:10px;
            padding-right:10px;
            padding-bottom:8px;
            color: #fff !important;
            border-bottom: 2px solid #FF9900;
        }
            .xw h4 a:hover {
                color: #FF9900;
                border-bottom: 2px solid #dfdfdf;
            }
        .xw a {
            color: #fff !important;
        }
        .xw h4 a:visited {
            color: #fff;
        }
            .xw h4 a:hover {
                color: #fff;
                text-decoration:underline;
            }

    .xw ul {
        padding-left:15px;
        padding-right:10px;
        padding-top:15px;
    }

    h3 a {
        color:#333;
    }
    h3 a:hover {
        color:#000;
        text-decoration:none;
    }
    h4 a {
        color:#333;
    }
    h4 a:hover {
        color:#000;
        text-decoration:none;
    }
</style>
<script src="~/Scripts/bootstrap.js"></script>

<!--
<section class="container">
    <hgroup class="title">
        <h1>@ViewBag.Title.</h1>
        <h2>@ViewBag.Message</h2>
    </hgroup>
    <p>
        To learn more about ASP.NET MVC visit
        <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
        The page features
        <mark>videos, tutorials, and samples</mark> to help you get the most from ASP.NET MVC.
        If you have any questions about ASP.NET MVC visit
        <a href="http://forums.asp.net/1146.aspx/1?MVC" title="ASP.NET MVC Forum">our forums</a>.
    </p>
</section>
-->

<div class="row" style="background-color:#333;position:relative;">
    <div class="col-xs-12 col-sm-12" style="margin-left: 0px; padding-left: 0;; padding-right: 0; overflow: hidden;">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                @for (var i=0; i< Model.News.Count;i++)
                {
                    if (i== 0)
                    {
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    }
                    else
                    {
                        if (i < 6)
                        {
                            <li data-target="#carousel-example-generic" data-slide-to="@i"></li>
                        }
                    }
                }
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox" id="imgRoll" style="overflow:hidden;">
                @for (var i = 0; i < Model.News.Count; i++)
                {
                    if (i == 0)
                    {
                        <div class="item active">
                            <img src=@Model.News[0].ImageData alt="" style="width:100%;height:auto;">
                        </div>
                        @*<div class="carousel-caption">
                        <h3>@Model.News[0].Title</h3>
                        <p>@Model.News[0].ProjectTitle</p>
                    </div>*@
                    }
                    else
                    {
                        if (i < 6)
                        {
                            <div class="item">
                                <img src=@Model.News[i].ImageData alt="" style="width:100%;height:auto;">
                            </div>
                        }
                    }
                }
            </div>
            <!-- Controls -->
            @*<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>*@
        </div>
        <div class="row" style="position: absolute; top: 0; width: 100%; ">
            <div class="col-xs-6 col-sm-8">
            </div>
            <div class="col-xs-6 col-sm-4 xw" style="background: url(/WeProjects/Images/news_bg.png); padding-bottom: 2000px; ">
                    <h4><a href="~/News"> 最 新 新 闻 </a></h4>
                    <ul>
                        @for (var i = 0; i < Model.News.Count; i++)
                        {
                            if (i < 9)
                            {
                                <li>
                                    @*<span style="color: #00ffff;">[ @Html.DisplayFor(modelItem => Model.News[i].ProjectTitle) ] </span>*@&nbsp;@Html.ActionLink(Model.News[i].Title, "Details", "News", new { id = Model.News[i].ID }, null)
                                </li>
                            }
                        }
                    </ul>
             </div>
         </div>
    </div>
</div>
<div class="row" style="padding-top: 15px; padding-bottom: 15px; background-color: #efefef;">
    <div class="col-xs-12 col-sm-4">
        <h4 style="color:#58b860;text-align:center;padding-top:14px;"><span class="glyphicon glyphicon-pushpin"></span> <a href="~/Notices">&nbsp;通&emsp;知</a></h4>
        <ul>
            @for (var i = 0; i < Model.Notices.Count; i++)
            {
                if (i < 4)
                {
                    <li>
                        @Html.ActionLink(Model.Notices[i].Title, "Details", "Notices", new { id = Model.Notices[i].ID }, null)
                        <br /><span style="color:#999;">@Model.Notices[i].PublishDate.ToString()</span>
                    </li>
                }
            }
        </ul>
    </div>
    <div class="col-xs-12 col-sm-4">
        <div style="background: url(/WeProjects/Images/zy.jpg) no-repeat right bottom; background-color: #FFF; ">
            <h4 style="color: #8b6fbc"><span class="glyphicon glyphicon-download-alt"></span> <a href="/Document" style="color: #8b6fbc">&nbsp;资&emsp;源</a></h4>
            <ul>
                @for (var i = 0; i < Model.Resources.Count; i++)
                {
                    if (i < 8)
                    {
                        <li>
                            @Html.ActionLink(Model.Resources[i].Title, "Details", "Resource", new { id = Model.Resources[i].ID }, null)
                        </li>
                    }
                }
            </ul>
        </div>
    </div>
    <div class="col-xs-12 col-sm-4">
        <div style="margin-left: -15px; background: url(/WeProjects/Images/xm.jpg) no-repeat right bottom; background-color: #FFF; ">
            <h4 style="color: #4ba5df"><span class="glyphicon glyphicon-list-alt"></span> <a href="/Project" style="color: #4ba5df">&nbsp;项&emsp;目</a></h4>
            <ul class="xm" style="height:200px; overflow:hidden;" id="xm">
                @for (var i = 0; i < Model.Projects.Count; i++)
                {
                        <li>
                            @Html.ActionLink(Model.Projects[i].Title, "Details", "Project", new { id = Model.Projects[i].ID }, null)
                        </li>
                }
            </ul>
        </div>
    </div>
</div>

<script src="~/Scripts/jquery.bootstrap.newsbox.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#imgRoll").css("max-height",Math.floor($("#imgRoll").width() * 9 / 21)+"px");
   });
    $(function () {
		$("#xm").bootstrapNews({
            newsPerPage: 10,
            autoplay: true,
			pauseOnHover: true,
			navigation: false,
            direction: 'down',
            newsTickerInterval: 2500,
            onToDo: function () {
                //console.log(this);
            }
        });
    });
</script>